<template>
    <div class="cd-wrapper">
        <div class="step-wrapper" v-show="showSteps">
            <el-steps :active="timeStatus" align-center  finish-status="success">
                <el-step title="下单" :description="time.time0"></el-step>
                <el-step title="支付" :description="time.time1"></el-step>
                <el-step title="发货" :description="time.time2"></el-step>
                <el-step title="交易成功" :description="time.time3"></el-step>
            </el-steps>
        </div>

        <div class="table">
            <el-row class="header_row">
                <el-col :span="24">订单概要</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">订单编号：</el-col>
                <el-col :span="8" class="col_2">{{ ordersDetail.orderId }}</el-col>
                <el-col :span="4" class="col_3">订单来源：</el-col>
                <el-col :span="8" class="col_4">{{ ordersDetail.source }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">订单状态：</el-col>
                <el-col :span="8" class="col_2">{{ ordersDetail.status }}</el-col>
                <el-col :span="4" class="col_3">店铺名称：</el-col>
                <el-col :span="8" class="col_4">{{ ordersDetail.shopName }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 col_bottom">生成时间：</el-col>
                <el-col :span="8" class="col_2 col_bottom">{{ ordersDetail.gmtModify }}</el-col>
                <el-col :span="4" class="col_3 col_bottom">支付时间：</el-col>
                <el-col :span="8" class="col_4 col_bottom">{{ ordersDetail.payTime }}</el-col>
            </el-row>
        </div>

        <div class="table">
            <el-row class="header_row">
                <el-col :span="24">物流信息</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">买家名称：</el-col>
                <el-col :span="8" class="col_2">{{ ordersDetail.buyerName}}</el-col>
                <el-col :span="4" class="col_3">收货地址：</el-col>
                <el-col :span="8" class="col_4" v-if="ordersDetail.address">{{ ordersDetail.address.provinceName }} {{ordersDetail.address.city}} {{ordersDetail.address.detailAddress}} {{ordersDetail.address.detailAddress2}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">联系电话：</el-col>
                <el-col :span="8" class="col_2" v-if="ordersDetail.address">{{ ordersDetail.address.telephone}}</el-col>
                <el-col :span="4" class="col_3">运送方式：</el-col>
                <el-col :span="8" class="col_4">快递</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 col_bottom">快递公司：</el-col>
                <el-col :span="8" class="col_2 col_bottom" v-if="ordersDetail.waybill">{{ ordersDetail.waybill.companyName}}</el-col>
                <el-col :span="4" class="col_3 col_bottom">运单号：</el-col>
                <el-col :span="8" class="col_4 col_bottom" v-if="ordersDetail.waybill">{{ ordersDetail.waybill.waybillid}}</el-col>
            </el-row>
        </div>

        <div class="table">
            <el-row class="header_row">
                <el-col :span="24">订单详情</el-col>
            </el-row>
            <el-table :data="itemList" v-model="itemList" style="width: 100%;" highlight-current-row border>
                <el-table-column prop="orderId" label="商品信息"  min-width="300"　align="center" >
                    <template scope="scope" >
                        <div class="customer_col">
                            <img :src="scope.row.img" @click="handleToDetail(scope.row.itemId)"/>
                            <span @click="handleToDetail(scope.row.itemId)">{{ scope.row.name}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="单价（美元）" align="center" min-width="150" ></el-table-column>
                <el-table-column prop="quantity" label="数量" align="center" min-width='70' ></el-table-column>
                <el-table-column prop="discountAmount" label="优惠（美元）" align="center" min-width='150' ></el-table-column>
                <el-table-column prop="cost" label="运费（美元）" align="center" min-width='150' ></el-table-column>
                <el-table-column prop="amount" label="总价" min-width="150" align="center" ></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        Row, Col, Form, FormItem, Input, Select, Option, Radio, DatePicker,Tabs,TabPane,Tree,Pagination,
        Cascader, ButtonGroup, Button, Table, TableColumn, Checkbox, Message, MessageBox, Steps,Step
    } from 'element-ui'
    import {mapGetters, mapActions, mapMutations} from 'vuex';
    import { formatDate } from '../../assets/js/common.js';
    import { addUS } from '../../assets/js/option.js';

    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Input);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Radio);
    Vue.use(DatePicker);
    Vue.use(Cascader);
    Vue.use(ButtonGroup);
    Vue.use(Button);
    Vue.use(Table);
    Vue.use(Tree);
    Vue.use(Pagination);
    Vue.use(TableColumn);
    Vue.use(Checkbox);
    Vue.use(Steps);
    Vue.use(Step);

    export default {
        head(){
            return {
                title: "订单详情"
            }
        },
        data () {
            return {
                ordersDetail: {
                    address: {},
                    itemList: [],
                    statusList: [],
                    waybill: {}
                },
                time:{
                    time0:'',
                    time1:'',
                    time2:'',
                    time3:''
                },
                timeStatus:0,
                itemList:[],
                showSteps: false
            }
        },
        methods: {
            getOrderDetail(orderId) {
                this.$store.dispatch('orderDetail', {orderId:orderId})
                    .then((response) => {
                        if(!response){return}
                        let result = response.data;
                        if (result.code == 0 && result.data) {
                            this.ordersDetail = result.data;
                            this.ordersDetail.gmtModify = formatDate(this.ordersDetail.gmtModify,'YYYY-MM-dd hh:mm:ss');
                            this.ordersDetail.payTime = formatDate(this.ordersDetail.payTime,'YYYY-MM-dd hh:mm:ss');

                            for(let i=0;i<this.ordersDetail.statusList.length;i++){
                                this.time['time'+i] = formatDate(this.ordersDetail.statusList[i].posttime,'YYYY-MM-dd hh:mm:ss');
                            }

                            this.timeStatus = this.ordersDetail.statusList.length;
                            this.itemList = this.ordersDetail.itemList;
                            for(let i=0;i<this.itemList.length;i++){
                                this.itemList[i].price = addUS(this.itemList[i].price);
                                this.itemList[i].discountAmount = addUS(this.itemList[i].discountAmount);
                                this.itemList[i].cost = addUS(this.itemList[i].cost);
                                this.itemList[i].amount = addUS(this.itemList[i].amount);
                            }
                            if (this.ordersDetail.status != 'closed'){
                                this.showSteps = true;
                            }
                        }
                    })
            },
            handleToDetail(itemId) {
                window.open('http://trade.onloon.net/detail?itemId=' + itemId, '_blank');
            }
        },
        created() {
            this.getOrderDetail(this.$route.query.orderId);
        }
    }
</script>

<style lang="scss">
    .table {
        margin-top: 40px;
        border: 1px solid #ccc;
        font-size: 14px;
        .header_row {
            border-bottom: 1px solid #ccc;
            line-height: 40px;
            font-weight: bold;
            color: #008dd8;
            text-indent: 10px;
            background: #f1f2f2;
        }

        .col_2, .col_4 {
            text-align: left;
            text-indent: 3px;
        }

        .col_1, .col_3 {
            text-align: right;
            background: #f1f2f2;
        }
        .col_1_extra {
            text-align: center;
        }

        .col_1, .col_2, .col_3 {
            border-right: 1px dotted #ccc;
            border-bottom: 1px dotted #ccc;
            &:last-child {
                border-bottom: none
            }
        }
        .col_4 {
            border-bottom: 1px dotted #ccc;
        }

        .col_bottom {
            border-bottom: none
        }

        .el-col {
            height: 40px;
            line-height: 40px;
        }
    }
    .step-wrapper {
        width: 80%;
        margin: 0 auto;
        .el-step__head.is-success {
            border-color: #20a0ff;
            color: #20a0ff;
        }
        .el-step__title.is-success,
        .el-step__description.is-success{
            color: #20a0ff;
        }
    }
    .customer_col {
        img {
            width: 100px;
            cursor: pointer;
        }
        span {
            vertical-align: top;
            margin-left: 10px;
            cursor: pointer;
            color: #20a0ff;
        }
    }

</style>